<template>
  <div class="user">
    <v-header :back-display="false">
      <div slot="title">个人中心</div>
    </v-header>

    <div class="userbox" v-if="!loginStatus">
      <div class="box-img">
        <img src="@/assets/moren.png" alt="">
      </div>
      <div class="box-txt clearfix">
        <div class="txt-left">
          <router-link class="login-btn" to="/user/login">立即登录</router-link>
          <p>未登录寸步难行</p>
        </div>
        <div class="txt-right">
          <img src="../../assets/right_1.png" alt="">
        </div>
      </div>
    </div>

    <div class="userbox" @click="showMsg" v-else>
      <div class="box-img">
        <img :src="userInfo.avatar" alt="">
      </div>
      <div class="box-txt clearfix">
        <div class="txt-left">
          <span>{{userInfo.username}}</span>
          <p>请设置个人信息</p>
        </div>
        <div class="txt-right">
            <img src="../../assets/right_1.png" alt="">
        </div>
      </div>
    </div>

    <div class="kind clearfix">
      <div v-for="(item,index) in table" :key="index" class="kind-item">
        <router-link :to="item.path" class="router">
          <img :src="item.img" alt="">
          <span>{{item.title}}</span>
        </router-link>
      </div>
    </div>

    <van-cell-group class="user-cell">
      <van-cell v-show="loginStatus" title="修改密码" is-link icon="setting-o" to="/user/password" />
      <van-cell title="意见反馈" is-link icon="edit" to="/user/feedback" />
      <van-cell v-show="loginStatus" title="退出" is-link  @click="showDialog" icon="warning-o"/>
    </van-cell-group>

  </div>
</template>

<script>
import header from '@/components/main/header'
import { Cell, CellGroup, Dialog, Toast } from 'vant';
import { mapGetters } from 'vuex'

export default {
  name: 'user',
  components:{
    "v-header":header,
    [Cell.name]: Cell,
    [Toast.name]: Toast,
    [CellGroup.name]: CellGroup,
    [Dialog.Component.name]: Dialog.Component,
  },
  data () {
    return {
      table:[
        {path:'/develop',img:require('@/assets/user-1.png'),title:'试题收藏'},
        {path:'/user/notes',img:require('@/assets/user-2.png'),title:'复习笔记'},
        {path:'/develop',img:require('@/assets/user-3.png'),title:'我的错题'},
        {path:'/develop',img:require('@/assets/user-4.png'),title:'学习记录'},
        {path:'/develop',img:require('@/assets/user-5.png'),title:'我的生词'},
      ],
    }
  },
  created () {
  },
  computed: {
    ...mapGetters([ 'loginStatus', 'userInfo' ])
  },
  methods: {
    //退出登录
    showDialog(){
      Dialog.confirm({message: '您确定退出登录吗?',}).then(() => {
        this.$store.dispatch('setSignOut')
        Toast.success('退出登录成功')
      })
      .catch(() => {
        // 取消
      });
    },

    // 跳转个人信息页面
    showMsg(){
      this.$router.push({path:'/user/Personalrepair'})
    }
  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.user{background-color: #f1f1f1;}
.userbox{
  margin: 10px;
  height: 100px;
  padding: 0 15px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .box-img{
    width: 64px;height: 64px;
    img{display: block;border-radius: 50%;width: 64px; height: 64px;object-fit: cover;}
  }
  .box-txt{
    width: calc(100% - 80px);position: relative;
    .txt-left{
      float: left;
      .login-btn{display: block;width: 96px;height: 32px;line-height: 32px;border-radius: 36px;color: #fff;background-color: #ff8333;text-align: center;font-size: 14px;margin-bottom: 12px;}
      p{font-size: 14px;color: #666;}
      span{font-size: 18px;color: #323232;margin-bottom: 12px;display: inline-block;}
    }
    .txt-right{
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: 20px;
      img{display: block;width: 100%;}
    }
  }
}

.kind{
  margin: 0 10px;
  padding: 20px 10px;
  background-color: #fff;
  border-radius: 10px;
  .kind-item{
    width: 30%;
    margin-right: 5%;
    margin-top: 20px;
    float: left;
    .router{
      display: block;
      img{
        display: block;
        width: 36px;
        height: 36px;
        margin: 0 auto;
      }
      span{
        display: block;
        text-align: center;
        margin-top: 10px;
        font-size: 13px;
      }
    }
  }
  .kind-item:nth-child(3n+3){
    margin-right: 0;
  }
  .kind-item:nth-child(-n+3){
    margin-top: 0;
  }
}

.user-cell{margin: 10px 0;}
.van-cell__left-icon {
    margin-right: 12px;
}
</style>
